<template>
	<div class="users-header">
		<router-link 
			tag='div' 
			class="uh-l"
			:class='{ userBackActive: backActive }'
			to='/'
			@touchstart.native='CommonUserTouchStart()'
			@touchend.native='CommonUserTouchEnd()'
		>
			<span class="iconfont users-back">
				&#xe675;
			</span>
		</router-link>
		<div class="uh-c"></div>
		<div class="uh-r"></div>
	</div>
</template>

<script>
	export default {
		name: 'users-header',
		data () {
			return {
				backActive: false
			}
		},
		methods: {
			CommonUserTouchStart () {
				this.backActive = true
			},
			CommonUserTouchEnd (){
				this.backActive = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/minxins.styl'
	.users-header
		height:94px
		/* background:#4285f4*/
		/*background:#1EB9F2*/
		/*background:#fff*/
		text-align:center
		line-height:94px
		font-size:28px
		color:#000
		flexRow()
		.uh-l
			width:80px
			height:94px	
			cursor:pointer
			border-radius:8px
		.userBackActive
			background:#e2e2e2
		.users-back
			font-size:36px
			
		.uh-c
			flex:1
			font-size:34px
		.uh-r
			width:82px
			height:94px
</style>
